<template>
  <div class="carousel-wrap">
    <concat-pic></concat-pic>
    <navBar @change="change"></navBar>
    <music></music>
    <name v-if="showName"></name>
    <contact></contact>
    <transition-group tag="ul" class='slide-ul' :name="transitionName">
      <li v-for="(list,index) in slideList" :key="index" v-show="index===currentIndex">
        <home v-show="index===0"></home>
        <third v-show="index===1"></third>
        <second v-show="index===2"></second>
        <fourth v-show="index===3"></fourth>
      </li>
    </transition-group>
    <animate-button :slideList="slideList" :currentIndex="currentIndex" @change="change"></animate-button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import animateButton from './com/animateButton'
import music from './com/music'
import navBar from './com/navBar'
import name from './com/name'
import contact from './com/contact'
import home from './main/home'
import second from './main/second'
import third from './main/third'
import fourth from './main/fourth'
import concatPic from './com/concatPic'
export default {
  name: 'hellow-world',
  components: {
    animateButton, music, navBar, home, second, third, name, fourth, contact, concatPic
  },
  mounted () {
    window.addEventListener('mousewheel', this.handleScroll, true)
  },
  data () {
    return {
      slideList: [
        {
          clickUrl: '#',
          desc: 'nhwc',
          image: '//img.hb.aicdn.com/784a29e4fd9cd551b966873b45154e27123fca18185a88-t2Kf6H_fw658'
        },
        {
          clickUrl: '#',
          desc: 'hxrj',
          image: 'https://picsum.photos/1024/480/?image=55'
        },
        {
          clickUrl: '#',
          desc: 'rsdh',
          image: 'https://picsum.photos/1024/480/?image=52'
        },
        {
          clickUrl: '#',
          desc: 'rsdh',
          image: 'https://picsum.photos/1024/480/?image=52'
        }
      ],
      currentIndex: 0,
      timer: '',
      transitionName: 'down',
      playMusic: false,
    }
  },
  computed: {
    ...mapState({
      showName: state => state.name.showName,
    })
  },
  methods: {
    change (index) {
      this.currentIndex = index
    },
    handleScroll (event) {
      if (event.wheelDelta < 0) {
        this.transitionName = 'down'
        this.currentIndex === this.slideList.length - 1 ? this.currentIndex = 0 : ++this.currentIndex
      } else {
        this.transitionName = 'up'
        this.currentIndex === 0 ? this.currentIndex = (this.slideList.length - 1) : --this.currentIndex
      }
      if (this.currentIndex === 0) {
        this.$store.commit('updateShowName', {showName: false})
      } else {
        this.$store.commit('updateShowName', {showName: true})
      }
    }
  }
}
</script>

<style scoped>
  .carousel-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background-color: #fff;
  }

  .slide-ul {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .slide-ul li {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  img {
    width: 100%;
    height: 100%;
  }

  .down-enter-to {
    transition: all 1s ease;
    transform: translateY(0);
  }

  .down-leave-active {
    transition: all 1s ease;
    transform: translateY(-100%)
  }

  .down-enter {
    transform: translateY(100%)
  }

  .down-leave {
    transform: translateY(0)
  }
  .up-enter-to {
    transition: all 1s ease;
    transform: translateY(0);
  }

  .up-leave-active {
    transition: all 1s ease;
    transform: translateY(100%)
  }

  .up-enter {
    transform: translateY(-100%)
  }

  .up-leave {
    transform: translateY(0)
  }
</style>
